<template>
    <div class="box">
        <div class="register_box">
            <Icon @click="closeWindow" type="md-close" size="24" class="icon_position" />
            <Input class="item-marginTop" size="large" v-model="username" placeholder="昵称" clearable />
            <Input class="item-marginTop" size="large" v-model="realname" placeholder="真实姓名" clearable />
            <Input class="item-marginTop" size="large" v-model="telephone" placeholder="电话号码" clearable />
            <Input class="item-marginTop" size="large" v-model="email" placeholder="邮箱地址" clearable />
            <Input class="item-marginTop" type="password" password size="large" v-model="password" placeholder="密码" />
            <Input class="item-marginTop" type="textarea" :row="4" v-model="address" placeholder="家庭地址" />
            <div class="item-marginTop email-check">
                <Button ghost size="large" type="success" style="width: 100px">发送验证码</Button>
                <input v-model="emailCheckNumber" maxlength="6" :autosize="{minRows: 2,maxRows: 4}" class="ivu-input ivu-input-large" type="text" placeholder="验证码...">
            </div>
            <Button class="item-marginTop" size='large' type="success" long>立即注册</Button>
        </div>
    </div>
</template>

<script>
import axios from 'axios';


export default {
    data() {
        return {
            username: '',
            realname:'',
            password: '',
            telephone: '',
            emailCheckNumber: '',
            email: '',
            address: '',
        }
    },
    methods: {
        closeWindow() {
            this.$el.style.display = 'none'
        },
        postRegister() {
            axios.post('http://39.96.195.154:8080/user/register', {
                username: this.username,
                telephone: this.telephone,
                password: this.password,
                realname: this.realname,
                email: this.email,
                address: this.address,
            })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
        },
        postSendcode() {
            console.log(this.telephone);
            axios.post('http://39.96.195.154:8080/user/sendcode', {
                phone_number: this.telephone,
            })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
        }
    },
}
</script>
<style lang="less">
    .box {
        width: 100vw;
        position: fixed;
        z-index: 999;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        .register_box {
            border-radius: 10px;
            box-shadow: 0 0 5px 5px #777;
            width: 300px;
            height: 550px;
            background-color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            padding: 20px;
            .icon_position {
                position: absolute;
                right: 5px;
                top: 5px;
            }
            .icon_position:hover {
                cursor: pointer;
            }
            .item-marginTop {
                margin-top: 25px;
            }
            .email-check {
                display: flex;
                justify-content: space-between; 
                input {
                    width: 100px;
                }  
            }
            textarea {
                resize: none;
                height: 60px!important;
            }
        }
    }
</style>